<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true" bgImage="../../static/icon/custom-tabar.png">
			<block slot="content">登录密码修改</block>
		</cu-custom>
		<view class="layout">
			<form @submit="submit">
				<view class="cu-form-group" style="border-radius: 10px 10px 0px 0px;">
					<input placeholder="请输入旧的密码" name="password" password="true"></input>
				</view>
				<view class="cu-form-group ">
					<input placeholder="请输入新的密码" name="newPassword" password="true"></input>
				</view>
				<view class="cu-form-group" style="border-radius: 0px 0px 10px 10px;">
					<input placeholder="请再次确认密码" name="configPassword" password="true"></input>
				</view>
				
				<view class="flex justify-center">
					<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round btn" form-type="submit">确认</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	
	export default {
		computed: {
			...mapState({
				user: ({ user }) => user.userInfo,
			}),
		},
		data() {
			return {
				
			};
		},
		methods:{
			...mapActions(['updatePassword']),
			async submit(e) {
				const data = e.detail.value
				const phone = this.user.phone
				if(!data.password){
					return this.$api.msg("请输入旧的密码")
				}
				if(!data.newPassword){
					return this.$api.msg("请输入新的密码")
				}
				if(!data.configPassword){
					return this.$api.msg("请再次确认密码")
				}
				if(data.password === data.newPassword) {
					return this.$api.msg("新密码不能和旧密码一样")
				}
				if(data.newPassword !== data.configPassword) {
					return this.$api.msg("新密码和确认密码不一致")
				}
				const formdata = {
					password: data.password,
					newPassword: data.newPassword,
					phone,
					u:phone
				}
				const PasswordData = await this.updatePassword(formdata)
				console.log(PasswordData)
			}
		}
	}
</script>

<style lang="scss">
	.layout{
		width: calc(100% - 26px);
		margin: 13px;
	}
	.cu-form-group+.cu-form-group {
		border-top: 1px solid #E6E6E6;
	}
	
	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}
	.color-100{
		color: #FFFFFF;
	}
	
	.btn{
		width: 240px;
		margin-top: 170px;
	}
</style>
